<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2025-04-11 14:00:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2025-07-22 16:29:46
-->
<template>
  <div>
    <!-- 设置标题 -->
    <Title title="设备状态分布"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left2" style="height: 150px;margin-top: 15px;"></div>
  </div>
</template>

<script>
//引入get请求
import { get } from "@/utils/request";
//引入
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {
      //设备状态数据
      devArr:[],
    }
  },
  async mounted() {
    await this.getDevData()
    await this.initLeft2()
  },
  methods: {
    //创建图表
    initLeft2(){
const piePlot = new Pie(this.$refs.left2, {
  appendPadding: 10,
  data:this.devArr,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'outer',
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();
    },
    //获取设备状态数据
    async getDevData(){
      //​'​/count​/countAll'
      let devData=await get('​/count​/countAll')
      //console.log(devData.data);
      this.devArr = devData.data
    },
  },
}
</script>

<style lang="scss" scoped></style>
